<template>
  <div class="right-style">
    <div class="side-item">
      <div class="side-title">
        <img src="../../../assets/images/screen/right-1.png" alt="" />
      </div>
      <div class="side-content">
        <div class="dashboard-box">
          <div class="dashboard-left">
            <div class="woman">
              <img src="../../../assets/images/screen/wuman.png" class="dashboard-img" />
              <div class="flex-1 line-2">
                <div class="font-size14 small-num-to-12 color-base">30%</div>
                <div class="font-size16 small-num-to-14">1234</div>
                <div class="font-size14 small-num-to-12 color-base">女性</div>
              </div>
            </div>
            <div class="man">
              <img src="../../../assets/images/screen/man.png" class="dashboard-img" />
              <div class="flex-1 line-2">
                <div class="font-size14 small-num-to-12 color-base">30%</div>
                <div class="font-size16 small-num-to-14">1234</div>
                <div class="font-size14 small-num-to-12 color-base">男性</div>
              </div>
            </div>
          </div>
          <div class="dashboard-right">
            <DashboardChart :dataset="dataset" :loading="true" />
          </div>
        </div>
      </div>
    </div>
    <div class="side-item">
      <div class="side-title">
        <img src="../../../assets/images/screen/right-2.png" alt="" />
      </div>
      <div class="side-content flex-column">
        <div class="flex-1">
          <div class="flex align-center progress"
            ><span class="progress-text">甘肃</span
            ><div class="flex-1"
              ><a-progress
                :percent="80"
                :show-info="false"
                :size="6"
                :stroke-color="{
                  '0%': 'RGBA(1, 56, 122, 1)', // 半透明红色
                  '100%': '#0089FF', // 半透明蓝色
                }" /></div
            ><span class="progress-num">120</span></div
          >
          <div class="flex align-center progress"
            ><span class="progress-text">河南</span
            ><div class="flex-1"
              ><a-progress
                :percent="80"
                :show-info="false"
                :size="6"
                :stroke-color="{
                  '0%': 'RGBA(1, 56, 122, 1)', // 半透明红色
                  '100%': '#0089FF', // 半透明蓝色
                }" /></div
            ><span class="progress-num">120</span></div
          >
          <div class="flex align-center progress"
            ><span class="progress-text">北京</span
            ><div class="flex-1"
              ><a-progress
                :percent="80"
                :show-info="false"
                :size="6"
                :stroke-color="{
                  '0%': 'RGBA(1, 56, 122, 1)', // 半透明红色
                  '100%': '#0089FF', // 半透明蓝色
                }" /></div
            ><span class="progress-num">120</span></div
          >
          <div class="flex align-center progress"
            ><span class="progress-text">武汉</span
            ><div class="flex-1"
              ><a-progress
                :percent="80"
                :show-info="false"
                :size="6"
                :stroke-color="{
                  '0%': 'RGBA(1, 56, 122, 1)', // 半透明红色
                  '100%': '#0089FF', // 半透明蓝色
                }" /></div
            ><span class="progress-num">120</span></div
          >
          <div class="flex align-center progress"
            ><span class="progress-text">长沙</span
            ><div class="flex-1"
              ><a-progress
                :percent="80"
                :show-info="false"
                :size="6"
                :stroke-color="{
                  '0%': 'RGBA(1, 56, 122, 1)', // 半透明红色
                  '100%': '#0089FF', // 半透明蓝色
                }" /></div
            ><span class="progress-num">120</span></div
          >
          <div class="flex align-center progress"
            ><span class="progress-text">上海</span
            ><div class="flex-1"
              ><a-progress
                :percent="80"
                :show-info="false"
                :size="6"
                :stroke-color="{
                  '0%': 'RGBA(1, 56, 122, 1)', // 半透明红色
                  '100%': '#0089FF', // 半透明蓝色
                }" /></div
            ><span class="progress-num">120</span></div
          >
        </div>
        <!-- <NewBarHorizontalChart
          width="100%"
          height="100%"
          :loading="true"
          direction="horizontal"
          :isPercentage="true"
          :islegendShow="false"
          :legendTitles="['客源']"
          :xAxisData="hjvDataName"
          :chartData="hjlData"
          :colorTextArr="['#009FE9']"
          :colorAreaArr="[
            {
              type: 'linear',
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                { offset: 0, color: '#009FE9' },
                { offset: 1, color: 'rgba(0,159,233,0.1)' },
              ],
            },
          ]"
        /> -->
      </div>
    </div>
    <div class="side-item">
      <div class="side-title">
        <img src="../../../assets/images/screen/right-3.png" alt="" />
      </div>
      <div class="side-content">
        <div class="flex-1">
          <div class="display-flex margin-bottom5">
            <img src="../../../assets/images/screen/rl.png" alt="" class="img-three" />
            <div class="three-item space-between font-size12">
              <span><img src="../../../assets/images/screen/icon-right.png" alt="" class="btn-icon" />人脸开锁</span
              ><span class="color-b-1"><span class="font-size18 small-num-to-16">1</span>次</span></div
            >
          </div>
          <div class="display-flex margin-bottom5">
            <img src="../../../assets/images/screen/ly.png" alt="" class="img-three" />
            <div class="three-item space-between font-size12">
              <span><img src="../../../assets/images/screen/icon-right.png" alt="" class="btn-icon" />蓝牙开锁</span
              ><span class="color-b-1"><span class="font-size18 small-num-to-16">1</span>次</span></div
            >
          </div>
          <div class="display-flex margin-bottom5">
            <img src="../../../assets/images/screen/mm.png" alt="" class="img-three" />
            <div class="three-item space-between font-size12">
              <span><img src="../../../assets/images/screen/icon-right.png" alt="" class="btn-icon" />密码开锁</span>
              <span class="color-b-1"><span class="font-size18 small-num-to-16">1</span>次</span>
            </div>
          </div>
          <div class="display-flex">
            <img src="../../../assets/images/screen/qt.png" alt="" class="img-three" />
            <div class="three-item space-between font-size12">
              <span><img src="../../../assets/images/screen/icon-right.png" alt="" class="btn-icon" />其他开锁</span>
              <span class="color-b-1"><span class="font-size18 small-num-to-16">1</span>次</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="side-item">
      <div class="side-title">
        <img src="../../../assets/images/screen/right-4.png" alt="" />
      </div>
      <div class="side-content">
        <div class="sector-box">
          <div class="sector-box-left">
            <NewRadiusPieChart :loading="true" width="100%" height="100%" :islegendShow="false" :color="colorPie" :chartData="typePieData"
          /></div>
          <div class="sector-box-right felx-column">
            <div v-for="(item, index) in typePieData" :key="item.name" class="sector-box-item">
              <span class="font-size12"><span :style="{ background: colorPie[index] }" class="dot"></span>{{ item.name }}</span>
              <span class="font-size16 text-fff small-num-to-14">{{ item.value }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" name="Left" setup>
  import { ref } from 'vue';
  import NewRadiusPieChart from './NewRadiusPieChart.vue';
  import DashboardChart from './DashboardChart.vue';
  // import NewBarHorizontalChart from './NewBarHorizontalChart.vue';
  const props = defineProps({
    loading: {
      type: Boolean as PropType<Boolean>,
      default: false,
    },
  });
  const colorPie = ref(['#3374EC', '#3F33EC', '#ECB833', '#EC6E33', '#33D6EC', '#3AFA90']);
  const typePieData = ref([
    { value: 902, name: '长期无入住' },
    { value: 344, name: '长期入住未离店' },
    { value: 1572, name: '未成年人' },
    { value: 317, name: '频繁开门' },
    { value: 1369, name: '一证多住' },
    { value: 289, name: '频繁换房' },
  ]);
  const hjvDataName = ref(['重庆', '杭州', '上海', '南京', '北京', '江苏', '湖南']);
  const hjlData = ref([[63, 68, 68, 69, 69, 71, 75]]);
  const dataset = [
    {
      name: '18岁以下',
      percentage: 21,
      value: 1200,
      color: '#3AFA90',
    },
    {
      name: '18-35岁',
      percentage: 34,
      value: 1000,
      color: '#00D9F5',
    },
    {
      name: '35-65岁',
      percentage: 55,
      value: 500,
      color: '#F7B500',
    },
    {
      name: '65岁以上',
      percentage: 79,
      value: 1280,
      color: '#0088FF',
    },
  ];
</script>
<style scoped lang="less">
  .ant-progress-line {
    margin-bottom: 0 !important;
  }
  .line-2 {
    line-height: 1.3;
  }
  .right-style {
    line-height: 1;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-gap: 14px;
    // height: 834px;
    height: 100%;
    color: #fff;
    font-size: 16px;
    .side-content {
    }
    .sector-box {
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      .sector-box-left,
      .sector-box-right {
        flex: 1;
        height: 100%;
        .sector-box-item {
          display: flex;
          justify-content: space-between;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: rgba(255, 255, 255, 0.5);
          padding: 2px 10px;

          background: linear-gradient(270deg, rgba(39, 125, 255, 0.31) 67%, rgba(39, 125, 255, 0) 100%);
          &:not(:last-child) {
            margin-bottom: 5px;
          }
          .dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            vertical-align: 0;
            margin-right: 4px;
          }
          .text-fff {
            color: #fff;
          }
        }
      }
    }
    .dashboard-box {
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: space-between;
      .dashboard-left {
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        line-height: 1.2;
        padding-left: 20px;
        .woman {
          flex: 1;
          display: flex;
          align-items: center;
        }
        .man {
          flex: 1;
          display: flex;
          align-items: center;
        }
      }
      .dashboard-right {
        height: calc(100% + 20px);
        width: 100%;
        flex: 2;
        margin-right: -30px;
        margin-top: 10px;
      }
      .dashboard-img {
        width: 25px;
        height: 57px;
        margin-right: 20px;
      }
    }
    .img-three {
      width: clamp(31px, 2.2vw, 42px);
      height: clamp(25px, 3.2vh, 34px);
      margin-right: 6px;
      display: block;
    }
    .three-item {
      background: rgba(2, 44, 95, 1);
      flex: 1;
      padding: 0 6px;
      .btn-icon {
        width: 6px;
        height: 6px;
        vertical-align: 1px;
      }
    }
  }
  .progress-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 12px;
    margin-right: 20px;
  }
  .progress-num {
    font-size: 16px;
    color: #dbf0ff;
    line-height: 16px;
    margin-left: 10px;
  }
  :deep(.progress) {
    .ant-progress {
      .ant-progress-inner {
        background: #002d68;
      }
    }
  }
  .color-b-1 {
    color: rgba(219, 240, 255, 1);
  }
</style>
